<template>
  <drag-col height="100%" width="100%" :leftPercent="20" :sliderWidth="8" sliderBgColor="#e6ecf5" sliderBgHoverColor="#e6ecf5">
    <template #left>
      <template-file-tree @currentNodeChange="currentNodeChange"></template-file-tree>
    </template>
    <template #right>
      <template-file-tabs ref="templateFileTabRef"></template-file-tabs>
    </template>
  </drag-col>
</template>

<script setup lang="ts">
import { DragCol } from '@/components/vue-resizer';

import TemplateFileTree from './template-file-tree.vue';
import TemplateFileTabs from './template-file-tabs.vue';
import type { ITemplateFileTab, ITemplateFileTree } from '../template-set';
import { ref } from 'vue';
defineOptions({
  name: 'TemplateFile',
});
const templateFileTabRef = ref();
const currentNodeChange = (node: ITemplateFileTree) => {
  if (node.directory === 0) {
    templateFileTabRef.value.openFile({
      id: node.id,
      fileName: node.fileName,
    } as unknown as ITemplateFileTab);
  }
};
const save = () => {
  templateFileTabRef.value.save();
};
defineExpose({ save });
</script>
<style>
.el-tab-pane {
  height: 100%;
}
.el-tabs__header {
  margin: 2px 0;
}
</style>
